<template>
  <div class="barContent">
    <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pictorialBar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/visualMap");
require("echarts/lib/component/dataZoom");
export default {
  name: "MyBarChart",
  components: {
    echarts,
  },
  props: ["echartsClass", "echartsData"],
  data() {
    return {
      myChart: null,
    };
  },
  created() { },
  beforeCreate() { },
  mounted() {
    let dom = this.$refs.myChart;
    let _this = this;
    _this.myChart = echarts.init(dom);
    _this.initChart();

    //自适应分辨
    _this.myChart._dom.style.width = _this.myChart.getWidth() + "px";
    _this.myChart._dom.style.height = _this.myChart.getHeight() + "px";

    _this.myChart._dom.children.forEach((v, i) => {
      if (i == 0) {
        v.style.width = _this.myChart._dom.style.width;
        v.style.height = _this.myChart._dom.style.height;
        v.children.forEach((vv) => {
          vv.style.height = _this.myChart._dom.style.height;
          vv.style.width = _this.myChart._dom.style.width;
        });
      }
    });
    _this.myChart.on("click", function (params) {
      _this.$emit("chartClick", params);
    });
  },
  methods: {
    initChart() {
      switch (this.echartsClass) {
        case "threeBar":
          this.threeBar();
          break;
        case "batteryBar":
          this.batteryBar();
          break;
        case "rainStationBar":
          this.rainStationBar();
          break;
        case "equipStatisticBar":
          this.equipStatisticBar();
          break;
        case "wellBar": //用于：监测分析-窨井水位分析
          this.wellBar();
          break;
      }
    },
    // 立体柱状图
    threeBar() {
      // 基于准备好的dom，初始化echarts实例
      let seriesData = [
        { value: 1246, itemStyle: { color: "#0bbdef" } },
        { value: 1054, itemStyle: { color: "#0bbdef" } },
        { value: 972, itemStyle: { color: "#0bbdef" } },
        { value: 826, itemStyle: { color: "#0bbdef" } },
        { value: 682, itemStyle: { color: "#0bbdef" } },
        { value: 546, itemStyle: { color: "#0bbdef" } },
      ];
      let grid = {
        containLabel: true,
        bottom: "30%",
        left: 0,
        top: 20,
        right: 0,
      };
      let unit = "公里";
      var xAxisData = ["类型1", "类型2", "类型3", "类型4", "类型5", "类型6"];
      let textColor = "#fff";
      if (this.echartsData) {
        seriesData = this.echartsData.seriesData;
        xAxisData = this.echartsData.xAxisData;
        grid = this.echartsData.grid ? this.echartsData.grid : grid;
        textColor = this.echartsData.textColor
          ? this.echartsData.textColor
          : textColor;
        unit = this.echartsData.unit ? this.echartsData.unit : unit;
      }
      this.myChart.setOption({
        color: ["#3cefff"],
        tooltip: {},
        grid: grid,
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisTick: false,
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: textColor,
                fontSize: 14,
                fontfamily: "微软雅黑",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        formatter: function (parms) {
          return `${parms.marker}${parms.name}</br>${parms.value}${unit}`;
        },
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            z: 0,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}",
                textStyle: {
                  color: "#00d8ff",
                  fontSize: 20,
                  fontfamily: "黑体",
                },
              },
            },

            data: seriesData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 10],
            symbolOffset: [0, 5],
            z: 0,
            data: seriesData,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                opacity: 0.7,
              },
            },
            barWidth: "30",
            data: seriesData,
          },
        ],
      });
    },
    // 电池柱状图
    batteryBar() {
      let data = {
        dataname: [
          "压力点1",
          "压力点2",
          "压力点3",
          "压力点4",
          "压力点5",
          "压力点6",
          "压力点7",
        ],
        completeName: [
          "压力点1",
          "压力点2",
          "压力点3",
          "压力点4",
          "压力点5",
          "压力点6",
          "压力点7",
        ],
        maxValue: [100, 100, 100, 100, 100, 100, 100],
        minValue: [70, 60, 50, 40, 30, 20, 10],
        unit: "",
        maxColor: "#cae6fd",
        minColor: "#5ca4ca",
        lableTextColor: "#00e4ff",
        title: "",
      };
      if (this.echartsData) {
        data.dataname = this.echartsData.dataname
          ? this.echartsData.dataname
          : data.dataname;
        data.completeName = this.echartsData.completeName
          ? this.echartsData.completeName
          : data.completeName;
        data.maxValue = this.echartsData.maxValue
          ? this.echartsData.maxValue
          : data.maxValue;
        data.minValue = this.echartsData.minValue
          ? this.echartsData.minValue
          : data.dataname;
        data.unit = this.echartsData.unit ? this.echartsData.unit : data.unit;
        data.maxColor = this.echartsData.maxColor
          ? this.echartsData.maxColor
          : data.maxColor;
        data.minColor = this.echartsData.minColor
          ? this.echartsData.minColor
          : data.minColor;
        data.title = this.echartsData.title ? this.echartsData.title : data.title;
        data.lableTextColor = this.echartsData.lableTextColor
          ? this.echartsData.lableTextColor
          : data.lableTextColor;
      }

      let gridTop = 80;
      if (data.title === "") {
        gridTop = 40;
      }
      this.myChart.setOption({
        title: {
          text: data.title,
          left: 30,
          top: 14,
          textStyle: {
            fontWeight: "normal",
            fontSize: 17,
            color: "#fff",
          },
        },
        grid: {
          top: gridTop,
          bottom: 20,
          left: 20,
          right: 20,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter(farmar) {
            return (
              farmar[1].marker +
              data.completeName[farmar[1].dataIndex] +
              "<br>" +
              data.minValue[farmar[1].dataIndex] +
              data.unit
            );
          },
        },
        xAxis: {
          type: "category",
          data: data.dataname,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: "15",
            },
          },

          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: false,
          axisLabel: {
            showMaxLabel: false,
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            // 背景色
            type: "pictorialBar",
            symbol: "fixed",
            symbolSize: [20, 10],
            symbolMargin: 2,
            symbolRepeat: "repeat",
            symbolBoundingData: 300,
            z: -10,
            data: data.maxValue,
            label: {
              normal: {
                show: true,
                position: "top",
                distance: 1,
                textStyle: {
                  color: data.lableTextColor,
                  fontSize: "16",
                },
                formatter(farmar) {
                  return data.minValue[farmar.dataIndex] + data.unit;
                },
              },
            },
            itemStyle: {
              normal: {
                color: data.maxColor,
              },
            },
          },
          {
            // 替代颜色
            type: "pictorialBar",
            symbol: "fixed",
            symbolSize: [20, 10],
            symbolMargin: 2,
            symbolRepeat: "repeat",
            barCategoryGap: "20%",
            z: -1,
            data: data.minValue,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 20, 30, 40],
                color: data.minColor,
              },
            },
          },
        ],
      });
    },
    // 雨量站柱状图
    rainStationBar() {
      let rainDataObj = { name: [], value: [], num: [], color: [], type: [] };
      let rainData = {
        info: [
          { name: "1号雨量站", value: 0 },
          { name: "2号雨量站", value: 0 },
          { name: "3号雨量站", value: 0 },
        ],
      };
      if (this.echartsData && this.echartsData.length > 0) {
        rainData.info = this.echartsData;
      }
      rainData.info.forEach((v, i) => {
        rainDataObj.num.push(i + 1);
        rainDataObj.name.push(v.name);
        rainDataObj.value.push(v.value);
        if (v.value <= 9.9) {
          rainDataObj.color.push("#a5f88c");
          rainDataObj.type.push("小雨");
        } else if (v.value <= 24.9) {
          rainDataObj.color.push("#0eb600");
          rainDataObj.type.push("中雨");
        } else if (v.value <= 49.9) {
          rainDataObj.color.push("#3fabff");
          rainDataObj.type.push("大雨");
        } else if (v.value <= 99.9) {
          rainDataObj.color.push("#2553ff");
          rainDataObj.type.push("暴雨");
        } else if (v.value <= 249) {
          rainDataObj.color.push("#e40034");
          rainDataObj.type.push("大暴雨");
        } else if (v.value > 249) {
          rainDataObj.color.push("#ff0303");
          rainDataObj.type.push("特大暴雨");
        }
      });
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tar = params[0];
            return (
              rainDataObj.name[tar.name - 1] +
              "<br/>" +
              "日降雨量" +
              " : " +
              tar.value +
              "mm" +
              "<br/>" +
              "降雨程度" +
              " : " +
              rainDataObj.type[tar.name - 1]
            );
          },
        },
        grid: {
          // show: true,
          left: "5%",
          right: "5%",
          bottom: "25%",
          top: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: rainDataObj.num,
            position: "top",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#606266",
                fontSize: 15,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#606266",
                width: 1, // 这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#606266",
                fontSize: 15,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#606266",
                width: 1, // 这里是为了突出显示加上的
              },
            },
            splitLine: {
              lineStyle: {
                color: "#606266",
                opacity: 0.2,
              },
            },
          },
        ],
        visualMap: {
          type: "piecewise",
          textStyle: {
            fontSize: 14,
            color: "#606266",
          },
          itemGap: 25,
          textGap: 5,
          itemWidth: 12,
          itemHeight: 12,
          pieces: [
            { min: 0 },
            { lte: 9.9, label: "小雨", color: "#a5f88c", symbol: "rect" },
            { lte: 24.9, label: "中雨", color: "#0eb600", symbol: "rect" },
            { lte: 49.9, label: "大雨", color: "#3fabff", symbol: "rect" },
            { lte: 99.9, label: "暴雨", color: "#2553ff", symbol: "rect" },
            { lte: 249.9, label: "大暴雨", color: "#e400e4", symbol: "rect" },
            {
              lte: Infinity,
              label: "特大暴雨",
              color: "#ff0303",
              symbol: "rect",
            },
          ],
          orient: "horizontal",
          left: "center",
          bottom: 5,
          dimension: 1,
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            name: "24小时降雨量",
            type: "bar",
            barWidth: "30%",
            data: rainDataObj.value,
            itemStyle: {
              // 通常情况下：
              normal: {
                // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  let colorList = rainDataObj.color;
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },
    //设备统计柱状图
    equipStatisticBar() {
      let data = {
        source: [
          //['prduct', '在线', '离线'],
          ["泵站", 23, 10],
          ["水质", 25, 6],
          ["井盖", 20, 5],
          ["雨量站", 16, 5],
        ],
      };

      if (this.echartsData) {
        data = this.echartsData;
      }
      let barMinHeight = 1,
        maxV,
        minV;
      minV = 0;
      maxV = 0;
      data.source.forEach((v) => {
        minV = minV > v[1] ? v[1] : minV;
        maxV = maxV > v[1] ? maxV : v[1];
      });
      if (maxV - minV > 100) {
        barMinHeight = maxV - minV;
      }

      this.myChart.setOption({
        legend: {},
        tooltip: {},
        grid: {
          show: "false",
          borderWidth: 0,
          top: "17%",
          bottom: "15%",
          left: "1%",
          right: "1%",
        },
        color: ["#7fd323", "#83a1c4"],
        dataset: data,
        xAxis: {
          type: "category",
          axisLine: {
            show: "false",
            lineStyle: {
              width: 0,
              color: "#ffffff",
            },
          },
          axisTick: {
            show: "false",
            lineStyle: {
              width: 0,
            },
          },
        },
        yAxis: {
          show: "false",
          axisLine: {
            show: "false",
            lineStyle: {
              width: 0,
              color: "",
            },
          },
          axisTick: {
            show: "false",
            lineStyle: {
              width: 0,
            },
          },

          splitLine: {
            show: "false",
            lineStyle: {
              width: 0,
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "8%",
            barMinHeight: barMinHeight,
            barGap: "10%",
            label: {
              show: "true",
              position: "top",
              color: "#18ff322",
              fontSize: "15px",
            },
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.6, color: "#b2cf13" },
                { offset: 1, color: "#195d09" },
              ]),
            },
          },
          {
            type: "bar",
            barWidth: "8%",
            barMinHeight: barMinHeight,
            label: {
              show: "true",
              position: "top",
              color: "#9bbde5",
              fontSize: "15px",
              align: "left",
            },
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.6, color: "#6a9bd4" },
                { offset: 1, color: "#3d4d67" },
              ]),
            },
          },
        ],
      });
    },
    //窨井水位柱状图
    wellBar() {
      let chartData = {
        xAxisData: [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
        ],
        seriesWell: [
          106,
          105,
          106,
          103,
          103,
          101,
          106,
          105,
          106,
          103,
          103,
          101,
        ],
        seriesWater: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        max: 15,
      };
      if (this.echartsData) {
        chartData = this.echartsData;
      }

      this.myChart.setOption({
        legend: {
          data: ["水面高程", "井口高程", "水面高程L", "井口高程L"],
          y: 20,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params, ticket, callback) {
            let str = "";
            params.forEach((v, i) => {
              if (i > 1) {
                str += v.marker + v.seriesName + ":" + v.value + "m" + "<br/>";
              }
            });
            return str;
          },
        },
        grid: {
          left: 10,
          right: 10,
          top: 10,
        },
        xAxis: {
          type: "category",
          data: chartData.xAxisData,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          show: true,
        },
        yAxis: {
          type: "value",
          max: chartData.max,
          axisLabel: {
            showMaxLabel: false,
          },
          show: false,
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: chartData.seriesWater,
            type: "bar",
            name: "水面高程",
            barWidth: 40,

            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#7AB6ED",
                  },
                  {
                    offset: 1,
                    color: "#7AB6ED",
                  },
                ]),
              },
            },
          },
          {
            // 背景色
            type: "pictorialBar",
            stack: "总量",
            name: "井口高程",
            symbol: "fixed",
            symbolSize: [40, 3],
            symbolMargin: 0,
            symbolRepeat: "repeat",
            symbolBoundingData: 200,
            z: -10,
            data: chartData.seriesWell,
            itemStyle: {
              normal: {
                color: "#FF9F4E",
              },
            },
          },
          {
            data: chartData.seriesWater,
            type: "line",
            smooth: true,
            name: "水面高程L",
            symbolSize: 10, // 控制线条上 点 的大小
            lineStyle: {
              color: "#7AB6ED",
            },
          },
          {
            data: chartData.seriesWell,
            type: "line",
            smooth: true,
            name: "井口高程L",
            symbolSize: 10, // 控制线条上 点 的大小
            lineStyle: {
              color: "#FF9F4E",
            },
          },
        ],
      });
    },
  },
  computed: {},
  watch: {
    echartsData: {
      handler: function (val, oldVal) {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>

<style>
.barContent {
  height: 100%;
  width: 100%;
}
</style>
